<template>
	<!-- 地区分类 -->
	<view class="place">
		<IndexHeader v-model="searchdata" @inputclear="searchdata = $event.clear" @confirm="confirm(searchdata)"></IndexHeader>
		<!-- 华北地区 -->
		<view class="titleBlock">
			<text class="iconfont  icon-retuijianyinqing"></text>
			{{ hbTitle }}
		</view>
		<view class="placeRegion">
			<navigator class="MenuNav" v-for="(item , index) in hbMenu" :key="index" :url="`/pages/place/${item.url}`">
				<image :src="item.menuImg"></image>
				<view class="MenuTitle">
					{{item.City}}
					<text>{{item.Name}}</text>
				</view>
			</navigator>
		</view>
		<!-- 华东地区 -->
		<view class="titleBlock">
			<text class="iconfont  icon-retuijianyinqing"></text>{{ hdTitle }}
		</view>
		<view class="placeRegion">
			<navigator class="MenuNav"  v-for="(item , index) in hdMenu" :key="index" :url="`/pages/place/${item.url}`">
				<image :src="item.menuImg"></image>
				<view class="MenuTitle">
					{{item.City}}
					<text>{{item.Name}}</text>
				</view>
			</navigator>
		</view>
		<!-- 华中地区 -->
		<view class="titleBlock">
			<text class="iconfont  icon-retuijianyinqing"></text>{{ hzTitle }}
		</view>
		<view class="placeRegion">
			<navigator class="MenuNav"  v-for="(item , index) in hzMenu" :key="index" :url="`/pages/place/${item.url}`">
				<image :src="item.menuImg"></image>
				<view class="MenuTitle">
					{{item.City}}
					<text>{{item.Name}}</text>
				</view>
			</navigator>
		</view>
		<!-- 华南地区 -->
		<view class="titleBlock">
			<text class="iconfont  icon-retuijianyinqing"></text>{{ hnTitle }}
		</view>
		<view class="placeRegion">
			<navigator class="MenuNav"  v-for="(item , index) in hnMenu" :key="index" :url="`/pages/place/${item.url}`">
				<image :src="item.menuImg"></image>
				<view class="MenuTitle">
					{{item.City}}
					<text>{{item.Name}}</text>
				</view>
			</navigator>
		</view>
		<!-- 东北地区 -->
		<view class="titleBlock">
			<text class="iconfont  icon-retuijianyinqing"></text>{{ dbTitle }}
		</view>
		<view class="placeRegion">
			<navigator class="MenuNav"  v-for="(item , index) in dbMenu" :key="index" :url="`/pages/place/${item.url}`">
				<image :src="item.menuImg"></image>
				<view class="MenuTitle">
					{{item.City}}
					<text>{{item.Name}}</text>
				</view>
			</navigator>
		</view>
		<!-- 西北地区 -->
		<view class="titleBlock">
			<text class="iconfont  icon-retuijianyinqing"></text>{{ xbTitle }}
		</view>
		<view class="placeRegion">
			<navigator class="MenuNav"  v-for="(item , index) in xbMenu" :key="index" :url="`/pages/place/${item.url}`">
				<image :src="item.menuImg"></image>
				<view class="MenuTitle">
					{{item.City}}
					<text>{{item.Name}}</text>
				</view>
			</navigator>
		</view>
		<!-- 西南地区 -->
		<view class="titleBlock">
			<text class="iconfont  icon-retuijianyinqing"></text>{{ xnTitle }}
		</view>
		<view class="placeRegion">
			<navigator class="MenuNav"  v-for="(item , index) in xnMenu" :key="index" :url="`/pages/place/${item.url}`">
				<image :src="item.menuImg"></image>
				<view class="MenuTitle">
					{{item.City}}
					<text>{{item.Name}}</text>
				</view>
			</navigator>
		</view>
		
	</view>
</template>

<script>
import IndexHeader from '@/components/search/index.vue'	
export default {
	components:{
		IndexHeader
	}, 
	watch:{
		searchdata(){
			console.log(this.searchdata);
		},
	},
	data() {
		return {
			searchdata:'',
			inpit:'text',
			
			hbTitle:'华北地区',
			hbMenu:[],
			
			hdTitle:'华东地区',
			hdMenu:[],
			
			hzTitle:'华中地区',
			hzMenu:[],
			
			hnTitle:'华南地区',
			hnMenu:[],
			
			dbTitle:'东北地区',
			dbMenu:[],
			
			xbTitle:'西北地区',
			xbMenu:[],
			
			xnTitle:'西南地区',
			xnMenu:[]
		}
	},
	 onLoad() {
		this.hbData();
		this.hdData();
		this.hzData();
		this.hnData();
		this.dbData();
		this.xbData();
		this.xnData();
	}, 
	methods: {
		//华北地区分类数据方法
		hbData(){
			   uni.request({
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/huabei',
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},  
				success: (res) => {
					console.log(res.data);
					this.hbMenu = eval(res.data);
				}
			}); 
		}, 
		//华东地区分类数据方法
		hdData(){
			   uni.request({
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/huadong',
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},  
				success: (res) => {
					console.log(res.data);
					this.hdMenu = eval(res.data);
				}
			}); 
		}, 
		//华中地区分类数据方法
		hzData(){
			   uni.request({
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/huazhong',
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},   
				success: (res) => {
					console.log(res.data);
					this.hzMenu = eval(res.data);
				}
			}); 
		}, 
		//华南地区分类数据方法
		hnData(){
			   uni.request({
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/huanan',
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},   
				success: (res) => {
					console.log(res.data);
					this.hnMenu = eval(res.data);
				}
			}); 
		}, 
		//东北地区分类数据方法
		dbData(){
			   uni.request({
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/dongbei',
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},   
				success: (res) => {
					console.log(res.data);
					this.dbMenu = eval(res.data);
				}
			}); 
		}, 
		//西北地区分类数据方法
		xbData(){
			   uni.request({
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/xibei',
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},   
				success: (res) => {
					console.log(res.data);
					this.xbMenu = eval(res.data);
				}
			}); 
		}, 
		//西南地区分类数据方法
		xnData(){
			   uni.request({
				// url:'http://mock-api.com/aKbvjYKx.mock/api/xinan',
				url:'https://www.fastmock.site/mock/ebd2bae095c3a5b84165133418907ff0/list/api/xinan',
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				},   
				success: (res) => {
					console.log(res.data);
					this.xnMenu = eval(res.data);
				}
			}); 
		}, 
		//搜索回车确定方法
		confirm(searchdata){
			if(searchdata){
				uni.showToast({
					title:this.searchdata,
					icon:'none',
					duration:500
				})
				uni.hideKeyboard()  //收起手机软键盘
			}else{
				uni.showToast({
					title:'请输入搜索内容！',
					icon:'none',
					duration:500
				})
			}}
	}
}
</script>

<style lang="scss">
.place{
	padding: 0 2%;
	.placeRegion{
		display: flex;
		flex-wrap:wrap;
		justify-content:flex-start;
		.MenuNav{
			position: relative;
			width: 31%;
			margin-right: 3.5%;
			margin-bottom: 24rpx;
			height: 180rpx;
			
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
			.MenuTitle{
				position: absolute;
				bottom: 10rpx;
				left: 20rpx;
				width: 90%;
				color: $uni-text-color-inverse;
				font-size: $uni-font-size-thirty;
				letter-spacing: $uni-spacing-row-xm;
				text{
					display: block;
					font-size: $uni-font-size-six;
				}
			}
			&:nth-child(3),
			&:nth-child(6),
			&:last-child{
				margin-right: 0;
			}
		}
	}
	.place-flex{
		width: 100%;
		.flexList{
			display: flex;
			display: -webkit-flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			.flex-blcok{
				width: 48.5%;
				margin-bottom: 30rpx;
				letter-spacing: $uni-spacing-row-xm;
				image{
					width: 100%;
					height: 300rpx;
					border-radius:$uni-border-radius-Twenty;
				}
				.placeName{
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					font-weight: 700;
					font-size: $uni-font-size-base;
					padding: 10rpx 0;
				}
				.placeTxt{
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size:$uni-font-size-base;
				}
			}
		}
	}
	
	
}	
</style>
